DeepWiki

02.c - Thank-You-Page

Relevant source files

This document describes the Thank You page (/thank-you), which is the final confirmation page displayed to users after successfully completing the GitHub OAuth flow and connecting their repository. This page sets expectations for email delivery and provides navigation options.

For information about the preceding Success page (payment confirmation and GitHub connection prompt), see Success Page & GitHub Connection. For information about the OAuth callback that redirects to this page, see OAuth Callback Handler.

Sources: app/thank-you/page.tsx L1-L48

Page OverviewLink copied!

The Thank You page is a server-side rendered Next.js page component that serves as the final user touchpoint in the purchase flow. Unlike the Success page, it does not require query parameters and is accessible directly at /thank-you. The page confirms that repository processing has begun and establishes email delivery expectations.

Key characteristics:

  • Route: /thank-you
  • Component type: Server Component (default in Next.js 14 App Router)
  • Authentication: None required (public page)
  • Parameters: None (stateless)
  • Primary function: Confirmation and expectation setting

Sources: app/thank-you/page.tsx L6-L48

Page ArchitectureLink copied!

The following diagram shows the component structure and data flow for the Thank You page:

Sources: app/thank-you/page.tsx L1-L48

app/success/RedirectTimer.tsx L1-L22

The Thank You page appears at the end of the complete purchase and integration flow. The following sequence diagram illustrates when this page is displayed:

Sources: app/thank-you/page.tsx L1-L48

app/success/RedirectTimer.tsx L9-L12

The Thank You page contains several distinct visual sections designed to provide clear feedback and set expectations.

SectionPurposeVisual StyleContent
Icon ContainerVisual success indicatorGreen circle background (bg-green-100)CheckCircle2 icon (24x24px)
TitlePrimary confirmationGreen text (text-green-600), 2xl font"All Set!"
DescriptionStatus messageDefault muted color"Your repository is being processed"
Info BoxEmail notification detailsBlue background (bg-blue-50), blue borderEmail address, timeframe, Mail icon
Thank You MessageGratitude expressionGray background (bg-gray-50)"Thank you for choosing us! 🎉"
Navigation LinksUser actionsSmall gray textHome link + redirect timer

Sources: app/thank-you/page.tsx L10-L43

The primary purpose of this page is to establish clear expectations about when the user will receive their DeepWiki documentation.

The blue info box (app/thank-you/page.tsx L20-L30

) communicates three critical pieces of information:

  1. Email address: noreply@godeep.wiki
  2. Delivery format: ZIP file attachment
  3. Timeframe: 1-9 hours

This timeframe reflects the manual nature of the documentation generation process, as documented in the high-level architecture. The system does NOT automate documentation generation—it only automates repository cloning. The owner must manually generate the documentation and email it to the customer.

Sources: app/thank-you/page.tsx L20-L30

The RedirectTimer is a client-side component that automatically redirects users back to the homepage after 10 seconds, providing a seamless exit from the purchase flow.

The component is defined in app/success/RedirectTimer.tsx L1-L22

and uses the following Next.js APIs:

  • "use client" directive - Marks the component as a Client Component
  • useRouter from next/navigation - Provides programmatic navigation
  • useEffect hook - Sets up the timer on component mount

Code reference:

The component returns a small gray text element (text-xs text-gray-400) that informs the user: "Redirecting to home in 10 seconds..."

Sources: app/success/RedirectTimer.tsx L1-L22

The page provides two navigation mechanisms for users to leave the Thank You page:

A "Return to Home" link (app/thank-you/page.tsx L39-L41

) allows users to immediately return to the landing page without waiting for the automatic redirect.

Implementation details:

  • Uses Next.js Link component for client-side navigation
  • Routes to / (landing page)
  • Styled as small gray text with underline on hover
  • Positioned below the thank you message box

The RedirectTimer component (app/thank-you/page.tsx L42

) provides a countdown and automatic redirect after 10 seconds.

Timing rationale:

  • 10 seconds gives users sufficient time to read the email delivery expectations
  • Prevents users from remaining on a "dead end" page
  • Improves overall user experience by guiding them back to the main site

Sources: app/thank-you/page.tsx L38-L43

app/success/RedirectTimer.tsx L1-L22

The Thank You page imports and uses the following external components and libraries:

ComponentPurposeImport Path
CardContainer wrapper@/components/ui/card
CardContentMain content area@/components/ui/card
CardDescriptionSubtitle text@/components/ui/card
CardHeaderHeader section@/components/ui/card
CardTitleMain title@/components/ui/card
IconPurposeVisual
CheckCircle2Success indicatorGreen checkmark in circle
MailEmail referenceEnvelope icon
ComponentPurposeImport Path
LinkClient-side navigationnext/link
RedirectTimerAutomatic redirect../success/RedirectTimer

Sources: app/thank-you/page.tsx L1-L4

The following diagram maps code constructs to their visual representation on the page:

Sources: app/thank-you/page.tsx L6-L48

The Thank You page uses Tailwind CSS utility classes for styling, with colors aligned to semantic meanings:

ElementColor ClassPurpose
Success icon backgroundbg-green-100Positive confirmation
Title texttext-green-600Success state
Info box backgroundbg-blue-50Informational content
Info box borderborder-blue-100Subtle boundary
Info box texttext-blue-700, text-blue-900Readable on blue background
Thank you box backgroundbg-gray-50Neutral, secondary content
Navigation linkstext-gray-500De-emphasized action
Redirect timertext-gray-400Minimal visual weight
  • Container: min-h-screen flex items-center justify-center bg-gray-50 p-4
  • Card: w-full max-w-md (constrains width to 28rem/448px)
  • Spacing: space-y-4 (1rem vertical gap between sections)
  • Text alignment: text-center (header and navigation sections)

Sources: app/thank-you/page.tsx L8-L46

The Thank You page implements several accessibility features:

  1. Semantic HTML structure - Uses appropriate heading hierarchy (CardTitle renders as heading)
  2. Icon alternatives - Icons are accompanied by descriptive text
  3. Sufficient color contrast - Text meets WCAG AA standards against backgrounds
  4. Keyboard navigation - All interactive elements (Link) are keyboard accessible
  5. Screen reader friendly - Content flows logically for screen reader users
  6. Responsive design - p-4 padding and max-w-md ensure readability on all screen sizes

Note on auto-redirect: The 10-second automatic redirect could be problematic for users requiring extra time to read. However, the manual "Return to Home" link provides an alternative exit path.

Sources: app/thank-you/page.tsx L8-L46

app/success/RedirectTimer.tsx L17-L21

The Thank You page is the terminal node in the user-facing purchase flow, but it represents the beginning of the backend processing workflow:

The Thank You page is the last direct user interaction point. From this moment, all remaining work happens asynchronously in the background, culminating in email delivery within 1-9 hours.

Related pages:

Sources: app/thank-you/page.tsx L1-L48

Refresh this wiki

Last indexed: 23 November 2025 (922b35)

On this page

Ask Devin about godeep.wiki-jb

02.c - Thank-You-Page | DeepWiki | godeep.wiki